<template>
  <div class="message_container" id="message">
    <div class="message">
      <div class="userInfo">
        <el-input v-model="message.author" class="nickname" placeholder="请输入昵称" prefix-icon="el-icon-user"></el-input>
        <el-input v-model="message.email" class="email" placeholder="请输入邮箱,不做展示用" prefix-icon="el-icon-message"></el-input>
        <el-input v-model="message.url" class="url" placeholder="请输入个人网站地址,非必填" prefix-icon="el-icon-link"></el-input>
      </div>
      <div class="leave">
        <div>
          <el-input
            type="textarea"
            :placeholder="placeHolder"
            class="publish_comment"
            rows="8"
            resize="none"
            v-model="message.content">
          </el-input>
        </div>
      </div>
      <div class="info">
        <el-button size="mini" v-show="btnVisible" @click="cancelReply()">取消回复</el-button>
        <el-button style="width: 20%" type="primary" plain @click="publish()">发布</el-button>
      </div>
      <div class="comment" v-for="(item, key) in messagesList" :key="key">
        <div class="father">
            <div class="tmsg-commentshow">
                <el-row class="tmsg-commentlist">
                    <el-col class="tmsg-c-item">
                        <article class="">
                            <header style="display: flex">
                              <div>
                                <el-avatar class="avatar" :src="item.information.avatar"></el-avatar>
                              </div>
                              <div>
                                <div class="i-name">
                                  <a target="_blank" style="text-decoration:none;color:black;" :href="item.information.url">{{item.information.author}}</a>
                                </div>
                                <span @click="reply(item.information.id, item.information.author)"
                                  style="margin-left:20px;font-size: 13px;color:#64609E;cursor: pointer">回复</span>
                                <span style="margin-left:20px;font-size: 15px;cursor: pointer">{{key + 1}}楼</span>
                                <div class="i-time">
                                    <time>{{item.information.create_time}}</time>
                                </div>
                                <div>
                                  <p class="message-content">{{item.information.content}}</p>
                                </div>
                              </div>
                            </header>
                        </article>
                    </el-col>
                    <div class="son" v-for="(child,key) in item.childrenInformation" :key="key">
                      <el-col class="tmsg-c-item">
                        <article class="">
                          <header style="display: flex">
                            <div>
                              <el-avatar class="avatar" :src="child.avatar"></el-avatar>
                            </div>
                            <div>
                              <div class="i-name"><a target="_blank" style="text-decoration:none;color:black;" :href="child.url">{{child.author}}</a><span style="color: #3399ea;margin-left: 20px">{{child.reply}}</span></div>
                              <span @click="reply(item.information.id, child.author)"
                                  style="margin-left:20px;font-size: 13px;color:#64609E;cursor: pointer">回复</span>
                              <div class="i-time">
                                <time>{{child.create_time}}</time>
                              </div>
                              <div>
                                <p class="child-content">{{child.content}}</p>
                              </div>
                            </div>
                          </header>
                        </article>
                      </el-col>
                    </div>
                </el-row>
            </div>
        </div>
      </div>
      <div class="pagination">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-size="size"
          layout="total, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: {
        email: '',
        author: '',
        content: '',
        parent_id: '',
        reply: '',
        ip: '',
        url: ''
      },
      messagesList: [],
      placeHolder: '说点什么呢``',
      current: 0,
      size: 0,
      total: 0,
      btnVisible: false,
      ip: ''
    }
  },
  metaInfo: {
    title: '风在哪博客留言板', // set a title
    meta: [{
      name: 'keywords',
      content: '风在哪,Java,Redis,IT,网络,操作系统,leetcode,个人网站,博客网站'
    },
    {
      name: 'description',
      content: '风在哪个人博客网站,热爱编程的学习者,Java后端技术分享,算法知识分享'
    }]
  },
  methods: {
    getIPAddress () {
      this.$axios.get('https://myip.ipip.net/').then(
        response => {
          const pattern = /\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/
          const text = pattern.exec(response.data)
          this.$set(this, 'ip', text[0])
        }
      )
    },
    handleCurrentChange (currentPage) {
      this.$axios.get('/view/message/getMyMessages', {
        params: {
          current: currentPage,
          size: 20
        }
      }).then(response => {
        // console.log(response.data)
        this.$set(this, 'messagesList', response.data.data)
      }).catch(error => {
        console.log(error)
      })
    },
    getMessages () {
      this.$axios.get('/view/message/getMyMessages', {
        params: {
          current: 1,
          size: 20
        }
      }).then(response => {
        // console.log(response.data)
        this.$set(this, 'messagesList', response.data.data)
        if (response.data.data === null) {
          this.total = 0
          this.current = 0
          this.size = 0
        } else {
          this.total = response.data.data[0].total
          this.current = response.data.data[0].current
          this.size = response.data.data[0].size
        }
      }).catch(error => {
        console.log(error)
      })
    },
    publish () {
      if (this.message.author.match(/^[ ]*$/)) {
        this.$message.author = '匿名'
      }
      if (this.message.email.match(/^[ ]*$/)) {
        this.$message.email = '#'
      }
      if (this.message.url.match(/^[ ]*$/)) {
        this.$message.url = '#'
      }
      if (this.message.content.match(/^[ ]*$/)) {
        this.$message.warning('请输入留言内容')
      } else {
        this.message.ip = this.ip
        this.$axios.post('/view/message/publishMessage', this.message).then(response => {
          if (response.data.code !== '200') this.$message.error(response.data.msg)
          this.$message.success(response.data.msg)
          this.getMessages()
          this.message.content = ''
          this.message.author = ''
          this.message.email = ''
          this.message.url = ''
        })
      }
    },
    reply (pid, nickname) {
      this.message.parent_id = pid
      this.message.reply = '@' + nickname
      this.placeHolder = '@' + nickname
      document.getElementById('message').scrollIntoView()
      this.btnVisible = true
    },
    cancelReply () {
      this.btnVisible = false
      this.message.parent_id = ''
      this.message.reply = ''
      this.placeHolder = ''
    }
  },
  created () {
    this.getMessages()
    this.getIPAddress()
  }
}
</script>

<style lang="less" scoped>
.message_container{
  width: 100%;
  margin-top: 30px;
}
.message{
  margin-left: 9%;
  width: 80%;
  background: #fff;
  padding:15px;
  margin-bottom: 20px;
  border-radius: 5px;
}
.info{
  margin-bottom: 20px;
  justify-content: flex-end;
  display: flex;
}
.userInfo{
  margin-bottom: 20px;
  display: flex;
}
.nickname{
  width: 30%;
}
.email{
  width: 30%;
  margin-left: 1%;
}
.url{
  width: 30%;
  margin-left: 1%;
}
.publish_comment{
  width: 100%;
  height: 200px;
  text-align: center;
}
/*评论列表*/
.tmsg-comments .tmsg-comments-tip{
    display: block;
    border-left: 2px solid #363d4c;
    padding: 0 10px;
    margin: 40px 0;
    font-size: 20px;
}
.tmsg-commentlist {
    margin-bottom:20px;
}
.tmsg-commentshow>.tmsg-commentlist{
    border-bottom: 1px solid #e5eaed;
}
.tmsg-c-item{
    border-top: 1px solid #e5eaed;
}
.tmsg-c-item article{
    margin:20px 0;
}
.tmsg-c-item article header{
    margin-bottom:10px;
}
.tmsg-c-item article header img:hover{
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
}
.i-name{
    font-size: 14px;
    margin:5px 8px 7px 0;
    color:#444;
    font-weight: bold;
    display: inline-block;
}
.tmsg-c-item article header .i-class{
    display: inline-block;
    margin-left:10px;
    background: #dff0d8;
    color:#3c763d;
    border-radius: 5px;
    padding: 3px 6px;
    font-size: 12px;
    font-weight: 400;
}
.i-time{
    color:#aaa;
    font-size: 12px;
}
.tmsg-c-item article section{
    margin-left: 80px;
}
.tmsg-c-item article section p img{
    vertical-align: middle;
}
.avatar {
  cursor: pointer;
}
.son{
  margin-left: 40px;
}
.pagination{
  text-align: center;
}
.message-content{
  word-break:normal;
  white-space:pre-line;
}
.child-content{
  word-break:normal;
  white-space:pre-line;
}
</style>
